<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: liuyq
 * @LastEditTime: 2021-09-22 17:48:47
-->
<template>
  <!-- 2.创建一个图表容器 容纳图表 -->
  <div ref="root" style="height: 100px;width:120px;float:left"></div>
  <div ref="root2" style="height: 100px;width:120px;float:right"></div>
</template>

<script>
import { Gauge } from "@antv/g2plot";
// 1.引入组件
export default {
  data() {
    return {
      percent: 0 ,
      percent2: 0
    };
  },
  mounted() {
    this.initCharts();
    this.initCharts2();
  },
  methods: {
    initCharts() {
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ["#F4664A", "#FAAD14", "#30BF78"];
      // 3.创建一个仪表盘实例对象
      let gauge = new Gauge(this.$refs["root"], {
        percent: this.percent,
        range: {
          ticks: [0, 1],
          color: ["l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78"],
        },
        indicator: {
          pointer: {
            style: {
              stroke: "#D0D0D0",
            },
          },
          pin: {
            style: {
              stroke: "#D0D0D0",
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return "差";
              }
              if (percent < ticks[2]) {
                return "中";
              }
              return "优";
            },
            style: ({ percent }) => {
              return {
                fontSize: "36px",
                lineHeight: 1,
                color:
                  percent < ticks[1]
                    ? color[0]
                    : percent < ticks[2]
                    ? color[1]
                    : color[2],
              };
            },
          },
          content: {
            offsetY: 36,
            style: {
              fontSize: "24px",
              color: "#4B535E",
            },
            formatter: () => "系统表现",
          },
        },
      });
      // 4.渲染
      gauge.render();
      // 间歇调用
      setInterval(()=>{
        if(this.percent < 0.75) {
          this.percent += 0.01;
          gauge.changeData(this.percent);
        } else {
          this.percent = 0.75;
        }
      }, 10)
    },
    initCharts2() {
      const ticks = [0, 1 / 3, 2 / 3, 1];
      const color = ["#F4664A", "#FAAD14", "#30BF78"];
      // 3.创建一个仪表盘实例对象
      let gauge2 = new Gauge(this.$refs["root2"], {
        percent: this.percent,
        range: {
          ticks: [0, 1],
          color: ["l(0) 0:#F4664A 0.5:#FAAD14 1:#30BF78"],
        },
        indicator: {
          pointer: {
            style: {
              stroke: "#D0D0D0",
            },
          },
          pin: {
            style: {
              stroke: "#D0D0D0",
            },
          },
        },
        statistic: {
          title: {
            formatter: ({ percent }) => {
              if (percent < ticks[1]) {
                return "差";
              }
              if (percent < ticks[2]) {
                return "中";
              }
              return "优";
            },
            style: ({ percent }) => {
              return {
                fontSize: "36px",
                lineHeight: 1,
                color:
                  percent < ticks[1]
                    ? color[0]
                    : percent < ticks[2]
                    ? color[1]
                    : color[2],
              };
            },
          },
          content: {
            offsetY: 36,
            style: {
              fontSize: "24px",
              color: "#4B535E",
            },
            formatter: () => "系统表现",
          },
        },
      });
      // 4.渲染
      gauge2.render();
      // 间歇调用
      setInterval(()=>{
        if(this.percent2 < 0.85) {
          this.percent2 += 0.01;
          gauge2.changeData(this.percent2);
        } else {
          this.percent2 = 0.85;
        }
      }, 10)
    },
  },
};
</script>